import React, { Component, PropTypes } from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import Base from '../../../utils/Base';
import FontFamilys from '../../../utils/FontFamilys';
import ChangeVisitReminderContainer from '../../../containers/changeVisitReminderContainer';

const { width } = Base.window;

class VisitRemindHeader extends Component {
  static propTypes = {
    currentTitle: PropTypes.string,
    onPress: PropTypes.func,
    titleColor: PropTypes.string,
    align: PropTypes.string,
  };
  _goChangeVisitReminder() {
    const title = '添加拜访提醒';
    const type = 'add';
    const { data, dispatch, id } = this.props;
    this.props.navigator.push({
      component: ChangeVisitReminderContainer,
      passProps: {
        title,
        data,
        type,
        id,
        dispatch,
      },
    });
  }
  render() {
    const currentTitleColor = this.props.titleColor === 'white' ? '#fff' : '#333333';
    const backNameColor = this.props.titleColor === 'white' ? '#fff' : '#333333';
    const align = this.props.align === 'right' ? 'flex-end' : 'center';
    return (
      <View style={[style.wrapper]}>
        <View style={style.back}>
          <TouchableOpacity
            activeOpacity={0.75}
            style={style.title}
            onPress={() => this.props.onPress()}
          >
            <Image style={style.backIcon} source={require('../../../img/go_back.png')} />
            <Text style={[style.backName, { color: backNameColor }]}>拜访提醒</Text>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={0.75}
            style={[style.backTap, style.row]}
            onPress={() => this._goChangeVisitReminder()}
          >
            <Text style={style.addVisit}>添加</Text>
            <Image style={style.addIcon} source={require('../../../img/detail/dtAdd.png')} />
          </TouchableOpacity>
        </View>
        <View style={[style.currentTitle, { alignItems: align }]}>
          <Text
            style={[style.pageName, { color: currentTitleColor }]}
          >
            {this.props.currentTitle}
          </Text>
        </View>
        {this.props.children}
      </View>
    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    height: PxToDp(60),
    width: '100%',
    backgroundColor: '#fff',
  },
  currentTitle: {
    flex: 1,
    width,
    justifyContent: 'center',
  },
  backName: {
    fontSize: PxToDp(18),
    color: '#333333',
    fontFamily: FontFamilys(),
  },
  title: {
    width: PxToDp(225),
    paddingLeft: PxToDp(14),
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: PxToDp(24),
  },
  back: {
    position: 'absolute',
    flexDirection: 'row',
    top: 0,
    zIndex: Platform.OS === 'ios' ? 1 : 0,
    width: '100%',
    height: PxToDp(60),
    paddingTop: PxToDp(40),
    paddingBottom: PxToDp(20),
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  backTap: {
    height: PxToDp(44),
    alignItems: 'center',
  },
  backIcon: {
    width: PxToDp(20),
    height: PxToDp(24),
  },
  pageName: {
    fontSize: PxToDp(17),
    fontWeight: 'bold',
  },
  addVisit: {
    marginRight: PxToDp(9),
    color: '#418cff',
    fontSize: PxToDp(14),
  },
  row: {
    flexDirection: 'row',
  },
  addIcon: {
    marginRight: PxToDp(20),
  },
});
export default VisitRemindHeader;
